<template>
	<view class="album">
		<view class="detail">
			<view class="box">
				<view class="add flex_r_around" @click="show = true">
					<image src="/static/technician/add.png"></image>
				</view>
				<view class="img flex_r_around" v-for="(item,index) in list" :key="index">
					<view class="img flex_r_around" @click="toVideo(item.image,item.type)">
						<image v-if="item.type == 'img'" :src="item.image" mode="aspectFill"></image>
						<image v-else :src="item.image + '?vframe/jpg/offset/8/'" mode="aspectFill"></image>
						<view class="mengb flex_c" :style="item.status != 2 ? '' : 'background:transparent'">
							<view class="icon" @click.stop="deleteIndex(index)">
								<uni-icons type="clear" :size="30" color="#FFF"></uni-icons>
							</view>
							<view>{{item.status == 1 ? '审核中' : item.status == 3 ? '审核未通过' : ''}}</view>
							<text>{{item.status == 1 ? '请耐心等待' : item.status == 3 ? '请删除后重新提交' : ''}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="album" type="center" :is-mask-click="false">
			<view class="rich">
				<view class="title">上传要求</view>
				<view class="rich_text">
					<p>个人相册将展示在你的技师主页中，是用户下单时的重要参考因素，请按下述要求先拍摄好照片/视频后，再进行上传:</p>
					<p>1.请上传本人真实照片/视频，不得侵犯他人肖像权；</p>
					<p>2.衣着须得体，不可穿着暴露、不得裸露或突出胸/臀等部位；</p>
					<p>3.不得包含侵犯他人著作权的音乐舞蹈、文案、图形、字体等内容;</p>
					<p>4.不得包含水印、马赛克、特效贴纸、表情包等，不得出现其它平台名称;</p>
					<p>5.不得出现任何色情、低俗、诱导及不良暗示内容。</p>
					<view>若无视上述要求，上传违禁内容或发生侵权行为，将由上传者本人承担全部法律责任。</view>
				</view>
				<view class="btn" @click="closePopup">我知道了，立即上传</view>
			</view>
		</uni-popup>

		<u-action-sheet :list="selectList" v-model="show" @click="onAlbum"></u-action-sheet>

		<view class="submit_btn" @click="onSubmit">下一步</view>

	</view>
</template>

<script>
	import http from '@/utils/https.js'
	import md5 from 'js-md5'
	let Base64 = require('js-base64').Base64
	var timestamp = Date.parse(new Date()) / 1000
	export default {
		data() {
			return {
				list: [],
				show: false,
				selectList: [{
					text: '上传图片'
				}, {
					text: '上传视频'
				}, ],
			}
		},
		methods: {
			createSign() {
				timestamp = Date.parse(new Date()) / 1000
				let last_num = timestamp.toString().slice(-1)
				if (last_num <= 3) {
					last_num = 3;
				} else if (last_num > 3 && last_num <= 6) {
					last_num = 6;
				} else if (last_num > 6 && last_num <= 9) {
					last_num = 9;
				} else {
					last_num = 0;
				}
				let new_str = timestamp.toString().slice(0, 9)
				let md5_str = md5(new_str);
				let str_split = md5_str.split('')
				let new_str_split = str_split.sort()
				return Base64.encode(new_str_split.join("") + '&time=' + timestamp);
			},
			upload(type, file, callback, add_water = 0) {
				uni.showLoading({
					title: '上传中',
				})
				try {
					token = uni.getStorageSync('token');
				} catch (e) {
					// error
				}
				uni.uploadFile({
					url: http.baseUrl + 'upload/permanent', //仅为示例，非真实的接口地址
					filePath: file,
					header: {
						'token': uni.getStorageSync('token'),
						'sign': this.createSign(),
					},
					name: 'file',
					formData: {
						'type': type,
						add_water: add_water,
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						let res = JSON.parse(uploadFileRes.data)
						if (res.code == 0) {
							callback(res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			closePopup() {
				this.$refs.album.close()
			},
			onAlbum(e) {
				if (e == 0) {
					this.$util.chooseImage({
						count: 9,
					}, res => {
						uni.showLoading({
							title: '上传中',
						})
						res.tempFilePaths.forEach(item => {
							this.$util.upload('picture', item, result => {
								if (result.code == 0) {
									this.list.push({
										image: result.data.url,
										status: 1,
										type:'img'
									})
									uni.hideLoading()
								}
							})
						})
					})
				}
				if (e == 1) {
					this.$util.chooseVideo({
						maxDuration: 30
					}, res => {
						uni.showLoading({
							title: '上传中',
						})
						this.upload('video', res.tempFilePath, result => {
							if (result.code == 0) {
								this.list.push({
									image: result.data.url,
									status: 1,
									type:'video'
								})
								uni.hideLoading()
							}
						})
					})
				}
			},
			onSubmit() {
				let work = this.list[0]
				this.request.httpTokenRequest({
					url: "/technician.technician/saveAuthInfo",
					method: "post"
				}, {
					person_images: JSON.stringify(this.list),
					work_clothes_image:JSON.stringify(work)
				}).then(data => {
					if (data.code == 0) {
						uni.navigateTo({
							url:'/technician/info/resume'
						})
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},
			toVideo(e,type){
				if(type == 'img'){
					uni.previewImage({
						urls:[e]
					})
				}else {
					uni.navigateTo({
						url:'/technician/video/video?src=' + e
					})
				}
			},
			deleteIndex(e){
				this.list.splice(e, 1)
			},
			getAuth(){
				let that = this
				this.request.httpTokenRequest({
					url: "technician.technician/getAuthInfo",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.auth = res.data
						uni.setStorageSync('authInfo',that.auth)
						if(uni.getStorageSync('authInfo') && uni.getStorageSync('authInfo').person_images && uni.getStorageSync('authInfo').person_images.length){
							this.list = uni.getStorageSync('authInfo').person_images
						}else {
							this.list = []
						}
						if(!this.list.length){
							// this.$nextTick(() => {
							// 	this.$refs.album.open()
							// })
						}else {
							this.list.forEach(item=>{
								let arr = item.image.split('.')
								if(arr[arr.length-1] == 'jpg' || arr[arr.length-1] == 'jpeg' || arr[arr.length-1] == 'png' || arr[arr.length-1] == 'PNG' || arr[arr.length-1] == 'JPG'){
									item.type = 'img'
								}else {
									item.type = 'video'
								}
							})
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
		},

		onLoad() {
			this.getAuth()
		}
	}
</script>

<style lang="scss" scoped>
	.album {
		padding: 30rpx;
	}

	.detail {
		min-height: 70vh;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 30rpx;

		.box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.add {
			width: 300rpx;
			height: 300rpx;
			border-radius: 20rpx;
			border: 1rpx solid #D3D3D3;
			margin-bottom: 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.img {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
			
			video {
				width: 300rpx;
				height: 300rpx;
			}
			
			.mengb {
				width: 300rpx;
				height: 300rpx;
				background: rgba(0, 0, 0, 0.4);
				position: absolute;
				left: 0;
				top: 0;
				padding: 100rpx 0;
				view {
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				.icon {
					position: absolute;
					right: 10rpx;
					top: 40rpx;
				}

				text {
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 30rpx;
				}
			}
		}
	}

	.rich {
		width: 620rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 35rpx 44rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			text-align: center;
		}

		.rich_text {
			background: #F5F7F8;
			border-radius: 20rpx;
			padding: 28rpx 25rpx;
			margin: 17rpx 0 42rpx;

			p {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			view {
				font-size: 28rpx;
				color: #DD0E0E;
				line-height: 40rpx;
				margin-top: 41rpx;
			}
		}

		.btn {
			width: 550rpx;
			height: 80rpx;
			background: #2E7EFA;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.submit_btn {
		width: 680rpx;
		height: 80rpx;
		background: #2E7EFA;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 40rpx auto;

	}
</style>